<template>
  <!-- 全局分页功能 -->
  <div  class="content">
    <el-pagination
      :total="total"
      :current-page="currentPage"
      :page-size="pageSize"
      background
      small
      layout="jumper, prev, pager, next,total"
      @current-change="handleCurrentChange"
    />
    <div class="edit" style="margin-top: 5px;margin-left: 12px">

       <div style="margin-top: 6px;font-size: small">每</div>
       <div style="margin-top: 6px;font-size: small">页</div>
       <el-input  v-model.number="pageSizes" style="margin: 0 3px" placeholder="条数/页" title="输入页/条数" size="mini"/>
       <div style="margin-top: 6px;font-size: small">条</div>
     </div>
      <el-button type="primary" style="height: 26px;margin-top: 5px;margin-left: 6px" size="mini"  @click="editPageSizes">应用</el-button>
  </div>
</template>

<script>
export default {
  name: 'PaginationPaging',
  props: {
    total: {
      type: Number, // 总条数
      default: 0
    },
    currentPage: {
      type: Number, // 当前页
      default: 1
    },
    pageSize: {
      type: Number, // 每页的条数
      default: 20
    }
  },
  data() {
    return {
      pageSizes: 20
    }
  },
  watch: {
    pageSize: function(newVal,oldVal) {
      this.pageSizes = newVal; //newVal即是chartData
    }
    },
  methods: {
    // 当前页事件
    handleCurrentChange(val) {
      this.$emit('currentChange', val)
    },
    // 用户自定义每页条数需要的触发事件
    editPageSizes() {
      // if(this.pageSize<=0){
      //   this.$message.error("非法数字！！")
      //   this.pageSizes=20
      //   return
      // }
      var numReg = /^[0-9]*$/
      var numRe = new RegExp(numReg)
      if (!numRe.test(this.pageSizes)) {
        this.$message({
          type: 'warning',
          message: '请输入整数 ',
        })
        this.pageSizes=20
        return false
      }else if(this.pageSizes>=201){
        this.$message({
          type: 'warning',
          message: '输入范围应在0-200',
        })
        this.pageSizes=20
        return false
      }
      this.$emit('editPagesizes', Number(this.pageSizes))
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  justify-content: flex-end;
  ::v-deep.edit {
    height: 30px;
    width: 80px;
    margin-top: 20px;
    margin-left: 20px;
    display: flex;
    justify-content: space-evenly;
    .el-input__inner {
      height: 30px;
      width: 30px;
      text-indent: 0em;
      font-size: 12px;
      padding: 0;
      text-align: center;
    }
    .el-button {
      height: 26px;
    }
  }
}
</style>

